<!DOCTYPE html>
<html lang="CN-ch">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>宋 · 运</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        var isMuted = false;
        function toggleMusic(){
        var audio = $('#audio')[0];
        var musicImg = $('#musicImg');

    if (isMuted) {
        audio.play();
        musicImg.attr('src', './image/music.png');
        isMuted = false;
    } else {
        audio.pause();
        musicImg.attr('src', './image/nomusic.png');
        isMuted = true;
    }
    }
        $(document).ready(function() {
        $(".musicbtn").click(function() {
        toggleMusic();
        });
    });
    </script>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&display=swap');
        html,body{
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
        .container{
            max-width: 99%;
            position: relative;
            margin: 0 auto;
            text-align: center;
            height: 100vh;
            overflow: hidden;
        }
        .bg{
            position: relative;
            margin: auto;
            width: fit-content;
            overflow: hidden;
        }
        .bgimg{
            max-width: 100%;
            max-height: 100%;
            height: 100vh;
        }
        .btn {
            position: absolute;
            width: 35%;
            height: 5%;
            left: 50%;
            bottom: 15%;
            background: linear-gradient(60deg,rgb(186, 135, 77),rgb(232, 160, 44),rgb(186, 135, 77));
            background-size: 400%;
            border-radius: 50px;
            color: #fff;
            transform: translate(-50%,0);
            font-size: 28px;
            align-items: center;
            justify-content: center;
            display: flex;
            font-family: 'Ma Shan Zheng', cursive;
        }
        .btn:hover{
            animation: liu 8s linear infinite;
        }
        @keyframes liu{
            from{
                background-position: 0%;
            }
            to{
                background-position: 400%;
            }
        }
        .musicbtn{
            position: absolute;
            width: 50px;
            height: 50px;
            top: 2%;
            right: 2%;
            margin: 0 auto;
        }
        .musicimg{
            width: 100%;
            height: 100%;
            animation: rotate 5s linear infinite;
       

        }
        
        @keyframes rotate {
            from {
                transform: rotate(0deg);
            }
            to {
                transform: rotate(360deg);
            }
        }


        
        a{
          text-decoration: none;
          color: #fff;
        }
    </style>
</head>
<body>
    <audio id="audio" autoplay loop>
        <source src="./music/music.mp3" type="audio/mpeg">
    </audio>
    <div class="container">
        <div class="bg">
            <div class="btn"><a href="yin ru ye.html">点击进入</a></div>
            <img class="bgimg" src="./image/index.jpg">
        </div>
        <div class="musicbtn" >
            <img id="musicImg" class="musicimg" src="./image/music.png">
        </div>
    </div>
</body>
</html>
